<template>
	<view>
		<view class="example">
			<view class="overspread"></view>
			<uni-forms ref="form" :modelValue="establishFrom">
				<uni-forms-item label="出库时间" name="date">
					<uni-datetime-picker type="date" return-type="date" v-model="establishFrom.date"
						:clear-icon="false" />
				</uni-forms-item>
				<uni-forms-item label="出库名" name="title">
					<uni-easyinput v-model="establishFrom.title" :clearable="false" />
				</uni-forms-item>

				<uni-forms-item label="出库仓库" name="warehouse_id">
					<uni-data-select v-model="establishFrom.warehouse_id" value="" :localdata="warehouseNewList"
						@change="changeWarehous" :disable="true" :clear="false"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="商品" name="goods_list">
					<zxz-uni-data-select :multiple="true" :filterable="true" v-model="establishFrom.goods_list"
						:localdata="commoditylist" :disable="true" :clear="false">
					</zxz-uni-data-select>
				</uni-forms-item>

				<view v-for="(item,index) in establishFrom.newProduct" :key="index" class="commodity_box">
					<view class="commodity">
						<view class="commodity">
							<text>商品名称</text>
							<text style="margin-left: 20rpx;">{{item.text}}</text>
						</view>
						<text>{{item.stock}}</text>
					</view>
				</view>

				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" v-model="establishFrom.remark" />
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		currenTime
	} from '@/common/config/timeFormat.js'
	//获取商品
	import {
		warehouseList,
	} from '@/api/warehouse.js'
	// 获取库
	import {
		enterSpeciFication, //新增用的接口
		getGoodsList, //入库商品列表
		outDeatils
	} from '@/api/library.js'

	export default {
		data() {
			return {
				establishFrom: {
					title: '', //入库名
					warehouse_id: null, //仓库
					goods_list: [], //商品
					remark: '', //备注
					date: currenTime(), //入库时间

					type: 3, //
					newProduct: [], //商品参数（需要删除）
				},
				warehouseNewList: [], //仓库列表
				commoditylist: [], //商品列表

				conduction: {}, //传值接收的对象
			};
		},

		computed: {
			accountLength() {
				return this.establishFrom.newProduct.length >= 4 ? '220rpx' : ''
			}
		},

		onShow() {
			this.gatherList()
			uni.setNavigationBarTitle({
				title: '出仓详情'
			})
		},
		onLoad(item) {
			this.conduction = item
			this.getDeatils()
		},
		methods: {
			gatherList() {
				// 仓库列表
				warehouseList(0).then(res => {
					if (res.length) {
						res = res.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.warehouseNewList = res
				})
			},
			changeWarehous(e) {
				this.establishFrom.newProduct = []
				// 选择仓库时,调用商品接口列表
				this.getSpecification(e)
			},
			getSpecification(e) {
				this.commoditylist = []
				// 仓库商品规格（商品列表）
				enterSpeciFication(e).then(res => {
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id,
								stock: 1
							}
						})
					}
					this.commoditylist = res.data
				})
			},
			// 选择商品
			inputChange(e) {
				this.establishFrom.newProduct = e
			},
			// 获取详细详细
			getDeatils() {
				outDeatils(this.conduction.id).then(res => {
					console.log('获取详细详细：', res);

					this.establishFrom.date = res.date
					this.establishFrom.title = res.title
					this.establishFrom.warehouse_id = res.warehouse_id
					this.establishFrom.remark = res.remark

					this.getSpecification(res.warehouse_id) //仓库商品规格（商品列表）

					getGoodsList(this.conduction.id).then(res => {
						res.data = res.data.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id,
								stock: code.stock
							}
						})
						res.data.forEach(code => {
							this.establishFrom.goods_list.push(code.product_id)
						})
						this.establishFrom.newProduct = res.data
						console.log(this.establishFrom.newProduct, res.data, '入库商品列表');
					})

				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
		position: relative;
		overflow: hidden;
	}

	.overspread {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	.commodity_box {
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 25rpx;
	}

	.commodity {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>